import React, { Component } from 'react'
import { UdTable, IUdColumn, IUdTableProps, columnRenders } from '@/lib'
import { PaginationConfig } from 'antd/lib/table'
import { Tooltip, Badge, Affix, Button } from 'antd'
import _ from 'lodash'
import dayjs from 'dayjs'
import { settledReviewstatusEnum } from '../../List'
import './index.scss'
import Item from 'antd/lib/list/Item'

export default class TodoTable extends Component<ITodoTableProps, ITodoTableState> {
  private statusEnum = {
    0: '审批中',
    1: '审批通过', // 审批完成
    2: '审批不通过', // 回退
  }

  static defaultState = {
    rowKey: (record, index) => index + '',
  }

  protected commonColumns = [
    { title: '序号', dataIndex: 'id', render: (text, record, index) => index + 1, width: 50 },
    { title: '申请编号', dataIndex: 'traceCode', width: 150 },
    {
      title: '申请标题',
      dataIndex: 'title',
      width: '30%',
      ellipsis: true,
      className: 'ellipsis-td',
      render: text => <div>{text}</div>,
    },
    // { title: '意见描述', dataIndex: 'opinionDepiction', render: (text) => {
    //   return (
    //   <Tooltip title={text}>
    //     <p className="todo-tips">{text}</p>
    //   </Tooltip>
    // )
    // } },
    { title: '销售组织', dataIndex: 'brandName', width: 230 },
    {
      title: '任务状态',
      dataIndex: 'approvalStatus',
      width: 120,
      render: text => {
        return (
          <span>
            <Badge status={text === 0 ? 'warning' : text === 1 ? 'success' : 'error'} />
            {this.statusEnum[text]}
          </span>
        )
      },
    },
    { title: '发起人', dataIndex: 'startUserName', width: 100 },
    {
      title: '提交时间',
      dataIndex: 'createTime',
      width: 180,
      render: text => text && dayjs(text).format('YYYY-MM-DD HH:mm:ss'),
    },
  ]
  constructor(props) {
    super(props)
    this.state = {
      columns: [],
      tableProps: {},
    }
  }

  componentWillMount() {
    let state = _.defaultsDeep({}, this.state, TodoTable.defaultState)
    this.setState(state)
  }

  render() {
    const { dataSource, pagination, loading, onChange } = this.props
    let { rowKey, buttons } = this.state
    buttons = buttons || []
    return (
      <div>
        {buttons.length == 0 ? null : (
          <Affix className="ud-page-toolbar-affix" offsetTop={40}>
            <Button.Group>
              {buttons.map((item, index) => {
                return (
                  <Button type={item.type} onClick={item.onClick} key={index}>
                    {item.text}
                  </Button>
                )
              })}
            </Button.Group>
          </Affix>
        )}
        <UdTable
          loading={loading}
          rowKey={rowKey}
          scroll={{ x: 'true' }}
          pagination={pagination}
          {...this.state.tableProps}
          columns={this.state.columns}
          dataSource={dataSource}
          onChange={onChange}
        />
      </div>
    )
  }
}

interface ITodoTableProps<T = any> extends IUdTableProps<T> {
  loading?: boolean
  dataSource?: T[]
  pagination?: PaginationConfig | false
  history?: any
  todoType?: number
  brandCode?: string
  stockType?: string
  refresh?: any
  orderBy?:any
}

interface ITodoTableState<T = any> {
  columns: IUdColumn<T>[]
  tableProps?: IUdTableProps<T>
  rowKey?: string | ((record?, index?) => string)
  buttons?: any
  selectedRowKeys?: any
}
